<!--
 描述: 主页模板
 作者: Jack Chen
 日期: 2020-06-15
-->

<template>
    <div class="home-container">
        <Header />
  
      <div class="content clearfix">
        <div class="list">
          <Form :model="formFind" ref="formFind" style="flex-wrap: wrap;">
            <Col span="5">
                <FormItem label="单词：" prop="word" label-position="left" :label-width=90>
                    <Input v-model="formFind.word" placeholder="请输入单词" />
                </FormItem>
            </Col>
            <Col span="9">
                <FormItem label="中文意思：" prop="word_zh" label-position="left" :label-width=120>
                  <Input v-model="formFind.word_zh" placeholder="请输入中文意思" />
                </FormItem>
            </Col>
            <Col span="9">
                <FormItem label="音标：" prop="phonetic" label-position="left" :label-width=90>
                  <Input v-model="formFind.phonetic" placeholder="请输入音标：" />
                </FormItem>
            </Col>
            <Col span="4" style="text-align:center">
                <Button type="primary" icon="md-search" size="large" @click="getTaskList">查找单词</Button>
            </Col>
            <Col span="3" style="text-align:center">
                <Button type="info" icon="md-trash" size="large" @click="handleReset('formFind')">重置</Button>
            </Col>
          </Form>
            
        </div>
  
        <Table :loading="loading" :columns="columns" :data="tableData">
          <template slot-scope="{ row, index }" slot="action">
           
            <Button type="primary" ghost style="margin-right: 10px" @click="edit(index)">编辑</Button>
          </template>
        </Table>
  
        <Page
          class-name="pagination"
          show-total
          :total="total"
          @on-change="handleCurrentChange"
          :page-size="pageSize"
          :current="pageNo"
          v-if="!loading && total > 0"
        />
      </div>
  
      <Footer />
  
      <Drawer
        :title="title"
        v-model="isShow"
        width="600"
        :styles="styles"
        :mask-closable="true"
      >
        <Form :model="formValidate" ref="formValidate" :rules="ruleValidate">
          <Col span="15" v-if="normalUserID==0">
                <FormItem label="单词：" prop="word" label-position="left" :label-width=85>
                  <Input v-model="formValidate.word" placeholder="请输入单词：" :disabled="type<=0"/>
                </FormItem>
            </Col>
            <Col span="16">
                <FormItem label="中文意思：" prop="word_zh" label-position="left" :label-width=85>
                  <Input v-model="formValidate.word_zh" placeholder="请输入中文意思：" :disabled="type<=0"/>
                </FormItem>
            </Col>
            <Col span="15">
                <FormItem label="音标：" prop="phonetic" label-position="left" :label-width=85>
                  <Input v-model="formValidate.phonetic" placeholder="请输入音标：" :disabled="type<=0"/>
                </FormItem>
            </Col>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" style="margin-right: 15px" @click="handleSubmit('formValidate')" v-if="type>0">{{ textBtn }}</Button>
          <Button @click="handleReset('formValidate')" style="margin-right: 15px" v-if="type>0">重置</Button>
          <Button type="error" ghost @click="isShow = false" v-if="type>0">取消</Button>
        </div>
      </Drawer>    
  
  
    </div>
  </template>
  
  <script>
  import Header from '@/components/Header';  
  import Footer from '@/components/Footer'; 
  import store from '../store'
  import { 
    formatTime,
    formatDate
  } from '@/utils/valid';
  import { 
    getAllWordList,
    editWord,
  } from '@/utils/api';
  import {uploadUrl} from '@/utils/url';
  
  export default {
    name: 'Home',
    components: {
      Header,
      Footer
    },
    data() {
        return {
          normalUserID: 0,
          loading: true,
          total: 0,
          pageNo: 1,
          pageSize: 10,
          textBtn: '提交',
          type: 1, // 1:添加 2:编辑
          title: '添加视频',
          isShow: false,
          deleteId: 0,  // 临时保存删除id
          styles: {
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
          },
          formFind: {
            word: '',
            word_zh: '',
            phonetic: '',
          },
          formValidate: {
            id: 0,
            word: '',
            word_zh: '',
            phonetic: '',
          },
          columns: [
            {
              title: '单词',
              key: 'word',
              width: 300,
              align: 'center'
            },
            {
              title: '中文意思',
              key: 'word_zh',
              width: 500,
              align: 'center'
            },
            {
              title: '音标',
              key: 'phonetic',
              width: 400,
              align: 'center'
            },
            {
              title: '操作',
              width: 200,
              slot: 'action',
              align: 'center'
            }
          ],
          tableData: [],
          ruleValidate: {
            word: [
              { required: true, message: '单词不能为空', trigger: 'blur' }
            ],
          },
          apiUrl: uploadUrl,
        }
    },
    computed: {
    },
    created() {},
    mounted() {
      
      this.normalUserID = 0;
      let user_type = store.state.userInfo.data.userData.user_type;
      if(user_type != 1){
        this.normalUserID = store.state.userInfo.data.userData.id;
      }
      this.getTaskList();
    },
    methods: {
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange(val) {
        console.log(val)
        this.pageNo = val;
        this.getTaskList();
      },
      // 获取词汇包列表数据
      getTaskList() {
        this.loading = true;
  
        let data = {
          word: this.formFind.word,
          word_zh: this.formFind.word_zh,
          phonetic: this.formFind.phonetic,
        }
        let params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          params: data
        }
  
        getAllWordList(params)
        .then(res => {
          console.log('视频列表===', res);
          this.loading = false;
          if (res.code == 0 && res.data) {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          } else {
            this.tableData = [];
            this.total = 0;
          }
        })
        .catch(() => {
          this.loading = false;
        })
      },
      // 添加任务
      addTask() {
        this.isShow = true;
        this.textBtn = '提交';
        this.title = '添加单词';
        this.type = 1;
        
        this.$refs['formValidate'].resetFields();
      },
      // 编辑任务
      edit(index) {
        this.complete(index)

        this.textBtn = '保存';
        this.title = '编辑单词';
        this.type = 2;
      },
      // 详情
      complete(index) {
        this.isShow = true;
        this.title = '单词详情';
        this.type = 0;
        if( index < this.tableData.length){
          let row = this.tableData[index];
          this.formValidate = {
            id: row.id,
            word: row.word,
            word_zh: row.word_zh,
            phonetic: row.phonetic,
          }
        }
      },
      // 删除任务
      innerRemove() {
        let data = {
          id: this.deleteId
        }
  
        deleteVideo(data)
        .then(res => {
          console.log('删除单词===', res);
          if (res.code == 0) {
            this.pageNo = 1;
            this.getTaskList();
            this.$Message.success('单词删除成功');
          } else {
            this.$Message.error(res.msg);
          }
        })
      },
      // 删除任务
      remove(id) {
        let a = this;
        this.deleteId = id;
        this.$Modal.confirm({
          title: '确认删除这条数据吗？',
          onOk: function(){
            a.innerRemove()
          }
        })
      },

      // 提交添加或编辑
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
  
            let data = {
              word: this.formValidate.word,
              word_zh: this.formValidate.word_zh,
              phonetic: this.formValidate.phonetic,
            }
            if (this.type == 1) {
              addVideo(data)
              .then(res => {
                console.log('添加词汇包===', res)
                this.isShow = false;
                if (res.code == 0) {
                  this.pageNo = 1;
                  this.getTaskList();
                  this.$Message.success(`${this.title}成功`);
                } else {
                  this.$Message.error(res.msg);
                }
              })
              .catch(() => {
                this.isShow = false;
              })
            } else if (this.type == 2) {
              data.id = this.formValidate.id;
  
              editWord(data)
              .then(res => {
                console.log('编辑词汇包===', res)
                this.isShow = false;
                if (res.code == 0) {
                  this.pageNo = 1;
                  this.getTaskList();
                  this.$Message.success(`${this.title}成功`);
                } else {
                  this.$Message.error(res.msg);
                }
              })
              .catch(() => {
                this.isShow = false;
              })
            }
  
          } else {
            return false;
          }
        })
      },
      // 重置表单
      handleReset (name) {
        this.$refs[name].resetFields();
      },
    }
        
  }
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      height: 100%;
      .list {
        display: flex;
        justify-content: space-between;
        align-content: center;
        Form {
          display: flex;
        }
      }
    }
  
  }	
  </style>
  <style lang="scss">
  .ivu-table-tip table td {
    width: 100% !important;
  }
  /*.ivu-input-icon-validate {
    display: none !important;
  }*/
  .pagination {
    float: right;
    margin: 20px 0;
  }
  
  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 16px;
    background: #fff;
    display: flex;
    justify-content: space-around;
  }
  </style>